<script setup name="">
import { getToken } from '@/utils/auth'
import { listExcel, listTeamList } from '@/api/statement/setmeal'
import { shortcuts, defaultTime1 } from '@/utils/dateSet'
const { proxy } = getCurrentInstance()
const userList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const today = new Date() // 时间
const dateRange = ref([
  today.setHours(0, 0, 0, 0),
  today.setHours(23, 59, 59, 59)
]) // 时间
// setHours(0, 0, 0, 0) 设置时间为当天的00:00:00.000
// toISOString() 转换  2024-05-23T15:59:59.000Z
console.log(dateRange.value[0])
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: '',
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: 'Bearer ' + getToken() },
  // 上传的地址
  url:
    import.meta.env.VITE_APP_BASE_API +
    '/credits/statementOfAccount/importStatementOfAccount'
})

const data = reactive({
  form: {},
  queryParams: {
    orderSource: undefined, // 订单来源
    startTime: dateRange.value[0], // 开始时间
    endTime: dateRange.value[1] // 结束时间
  },
  rules: {
    userName: [
      { required: true, message: '用户名称不能为空', trigger: 'blur' },
      {
        min: 2,
        max: 20,
        message: '用户名称长度必须介于 2 和 20 之间',
        trigger: 'blur'
      }
    ]
  }
})
const { queryParams, form, rules } = toRefs(data)
const changeDate = () => {
  queryParams.value.startTime = new Date(dateRange.value[0]).getTime()
  queryParams.value.endTime = new Date(dateRange.value[1]).getTime()
}

/** 查询用户列表 */
function getList () {
  loading.value = true
  listExcel(proxy.addDateRange(queryParams.value)).then(res => {
    loading.value = false
    userList.value = res.data
    total.value = res.total
  })
}
// 订单来源查询
const TeamList = ref([])
function listTeam () {
  listTeamList().then(response => {
    TeamList.value = response.data
  })
}
listTeam()
/** 搜索按钮操作 */
function handleQuery () {
  getList()
}
/** 重置按钮操作 */
function resetQuery () {
  dateRange.value = [today.setHours(0, 0, 0, 0), today.setHours(23, 59, 59, 59)]
  proxy.resetForm('queryRef')
  queryParams.value.orderSource = undefined
  queryParams.value.startTime = dateRange.value[0]
  queryParams.value.endTime = dateRange.value[1]
  // proxy.$refs.deptTreeRef.setCurrentKey(null);
  handleQuery()
}
/** 导出按钮操作 */
function handleExport () {
  proxy.download(
    '/credits/orderStatistics/exportOrderStatusStatisticsList ',
    {
      ...queryParams.value
    },
    `套餐状态表-${new Date().getTime()}.xlsx`
  )
}

/** 选择条数  */
function handleSelectionChange (selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

// 改变某一列单元格背景颜色
function tableCellStyle ({ row, column, rowIndex, columnIndex }) {
  console.log(row.taskColor, '-->row.taskColor')
  let rowBackground = {}
  if (row.paymentOfCommissionRate < 80 && row.paymentOfCommissionRate > 0) {
    if (columnIndex === 9) {
      rowBackground.background = '#a0cfff'
    }
  }
  if (
    row.paymentOfCommissionSendRate < 80 &&
    row.paymentOfCommissionSendRate > 0
  ) {
    if (columnIndex === 10) {
      rowBackground.background = '#a0cfff'
    }
  }
  return rowBackground
}

getList()
</script>

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="订单来源" prop="orderSource">
        <el-select v-model="queryParams.orderSource" clearable filterable>
          <el-option
            v-for="item in TeamList"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单时间" prop="date">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="defaultTime1"
          type="datetimerange"
          :shortcuts="shortcuts"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDate"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="userList"
      max-height="650"
      show-summary
      :cell-style="tableCellStyle"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column label="套餐id" align="center" fixed>
        <template #default="scope">
          <span>{{ scope.row.packageId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="套餐名称"
        align="center"
        fixed
        :show-overflow-tooltip="true"
        width="700"
      >
        <template #default="scope">
          <span>{{ scope.row.packageName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="废单量" align="center" prop="discardCount">
        <template #default="scope">
          <span
            :style="
              scope.row.discardCount === 0 ? 'color:#fff' : 'color:#606266'
            "
            >{{ scope.row.discardCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="处理中" align="center" prop="handlingCount">
        <template #default="scope">
          <span
            :style="
              scope.row.handlingCount === 0 ? 'color:#fff' : 'color:#606266'
            "
            >{{ scope.row.handlingCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="受理成功" align="center" prop="successCount">
        <template #default="scope">
          <span
            :style="
              scope.row.successCount === 0 ? 'color:#fff' : 'color:#606266'
            "
            >{{ scope.row.successCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="已激活" align="center" prop="activeCount">
        <template #default="scope">
          <span
            :style="
              scope.row.activeCount === 0 ? 'color:#fff' : 'color:#606266'
            "
            >{{ scope.row.activeCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="失败已重提" align="center" prop="resubmitCount">
        <template #default="scope">
          <span
            :style="
              scope.row.resubmitCount === 0 ? 'color:#fff' : 'color:#606266'
            "
            >{{ scope.row.resubmitCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="受理失败" align="center" prop="failCount">
        <template #default="scope">
          <span
            :style="scope.row.failCount === 0 ? 'color:#fff' : 'color:#606266'"
            >{{ scope.row.failCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="未提交" align="center" prop="notSubmitCount">
        <template #default="scope">
          <span
            :style="
              scope.row.notSubmitCount === 0 ? 'color:#fff' : 'color:#606266'
            "
            >{{ scope.row.notSubmitCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="提交失败" align="center" prop="submitFailCount">
        <template #default="scope">
          <span
            :style="
              scope.row.submitFailCount === 0 ? 'color:#fff' : 'color:#606266'
            "
            >{{ scope.row.submitFailCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="合计" align="center" prop="count">
        <template #default="scope">
          <span>{{ scope.row.count }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="合计"
        align="center"
        prop="paymentOfCommissionCount"
      >
        <template #default="scope">
          <span
            :style="
              scope.row.paymentOfCommissionCount === 0
                ? 'color:#fff'
                : 'color:#606266'
            "
            >{{ scope.row.paymentOfCommissionCount }}</span
          >
        </template>
      </el-table-column> -->
      <!--  -->
      <el-table-column label="发货成功率" align="center">
        <template #default="scope">
          <el-progress
            :text-inside="true"
            :stroke-width="18"
            :percentage="scope.row.successRate"
            status="success"
          />
        </template>
      </el-table-column>
      <el-table-column label="占录单激活率" align="center">
        <template #default="scope">
          <el-progress
            :text-inside="true"
            :stroke-width="18"
            :percentage="scope.row.activeAllRate"
            status="warning"
          />
        </template>
      </el-table-column>
      <el-table-column label="占发货激活率" align="center">
        <template #default="scope">
          <el-progress
            :text-inside="true"
            :stroke-width="18"
            :percentage="scope.row.activeSuccessRate"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
::v-deep(.el-progress-bar__innerText) {
  color: #000;
}
</style>
